<!-- 登录 -->
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { User, Lock, Iphone } from '@element-plus/icons-vue'
import router from '@/router'
import useToken from '@/hooks/useToken'
import IconLogo from '@/assets/img/icon/logo.svg'
import * as sysApi from '@/api/sys'
import { ProjTitle } from '@/config/global'
import { DefaultRouterName } from '@/config/global'
import { useSysStore } from '@/stores/sys'

const route = useRoute()
// 登录数据
const loginData = reactive({
  userName: '', // 账号
  passWord: '' // 密码
})
// 当前tab类型 1-账号登录 2-验证码登录
const curTab = ref(1)
// 表单ref
const loginFormRef = ref()

/**
 * 点击登录
 */
async function loginClick() {
  await loginFormRef.value?.validate((valid: any) => {
    if (valid) {
      loginReq()
    }
  })
}
/**
 * 发起登录请求
 */
async function loginReq() {
  // 发起请求 TODO
  let reqFunc = () => {}
  reqFunc()
  // 获取token
  useToken().setToken('')
  // 初始化数据及路由
  await useSysStore().initData()
  // 进入默认页面
  router.push({ name: DefaultRouterName })
}
/**
 * 点击tab
 */
function tabClick(index: number) {
  curTab.value = index
}
</script>

<template>
  <div class="login-bg">
    <div class="login-box">
      <!-- 登录类型 -->
      <div class="tab-box">
        <div class="tab-item" :class="{ active: curTab == 1 }" @click="tabClick(1)">账号登录</div>
        <div class="tab-item" :class="{ active: curTab == 2 }" @click="tabClick(2)">手机验证码登录</div>
      </div>
      <!-- logo -->
      <div class="logo-box">
        <el-image class="logo-img" :src="IconLogo" />
        <div class="logo-title">{{ ProjTitle }}</div>
      </div>
      <!-- 表单 -->
      <div class="form-box">
        <el-form ref="loginFormRef" :model="loginData" size="large">
          <!-- 账号登录 -->
          <template v-if="curTab == 1">
            <el-form-item prop="userName" required :rules="{ required: true, message: '请输入账号', trigger: 'blur' }">
              <el-input class="form-input" v-model="loginData.userName">
                <template #prepend>
                  <el-icon color="#666" size="18">
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="passWord" required :rules="{ required: true, message: '请输入密码', trigger: 'blur' }">
              <el-input class="form-input" v-model="loginData.passWord" showPassword>
                <template #prepend>
                  <el-icon color="#666" size="18">
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </template>
          <!-- 验证码登录 -->
          <template v-if="curTab == 2">
            <el-form-item>
              <el-input class="form-input">
                <template #prepend>
                  <el-icon color="#666" size="18">
                    <Iphone />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </template>
        </el-form>
        <el-button class="btn-login" type="primary" size="large" @click="loginClick">登 录</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.login-bg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../../assets/img/bg/bg_login.png') center center fixed no-repeat;
  background-color: #f5f5f5;

  .login-box {
    width: 500px;
    height: 600px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;

    .tab-box {
      height: 60px;
      display: flex;
      align-items: center;
      .tab-item {
        cursor: pointer;
        height: 100%;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #999;
        background-color: #f7f7f7;
      }
      .tab-item.active {
        font-weight: bold;
        background-color: white;
      }
    }

    .logo-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .logo-img {
        width: 80px;
        height: 80px;
        margin: 20px 0 10px 0;
      }
      .logo-title {
        font-size: 34px;
        font-weight: bold;
      }
    }

    .form-box {
      padding: 20px;
      .form-input {
        height: 50px;
        .el-input__wrapper {
          background-color: #eee;
        }
        .el-input-group__append,
        .el-input-group__prepend {
          background-color: #eee;
          padding: 0;
          width: 40px;
        }
      }
    }
    .btn-login {
      width: 100%;
      height: 50px;
      font-size: 20px;
    }
  }
}
</style>
